<template>
  <basic-container>
    <div v-if="zhiShow == 1">
      <div :height="searchheight">
        <span
          style="float: right; margin-top: -30px; cursor: pointer"
          @click="searchchangeadvanced"
          >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i
            :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          />
        </span>
        <div v-show="searchadvanced">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="getDataList()"
            class="form-inline"
            label-width="120px"
          >
            <el-form-item label="合同名称">
              <el-input
                v-model="dataForm.contractName"
                placeholder="合同名称"
                :clearable="true"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item label="受约人姓名">
              <el-input
                v-model="dataForm.shouyueName"
                placeholder="受约人姓名"
                :clearable="true"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item label="受约人岗位">
              <el-input
                v-model="dataForm.shouyueZhiwu"
                placeholder="受约人岗位"
                :clearable="true"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item label="受约人职级">
              <el-input
                v-model="dataForm.ryZjmc"
                placeholder="受约人职级"
                :clearable="true"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item label="发约人姓名">
              <el-input
                v-model="dataForm.fayueName"
                placeholder="发约人姓名"
                :clearable="true"
                style="width: 150px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                class="marginLeft"
                @click="getDataList(1)"
                >检索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="avue-crud">
        <div
          class="flex"
          style="justify-content: space-between; border-top: 1px solid #b0bde2"
        >
          <div class="mt10">
            业绩合同
            <span>
              <el-radio v-model="radio" label="1">个人</el-radio>
              <el-radio v-model="radio" label="2">机构</el-radio>
            </span>
            <span style="margin-left: 160px" v-if="permissions.hetongrenwu_hetonghtxxdjb_scope">
              数据范围
              <el-radio-group v-model="radioTwo">
                <el-radio
                  v-for="(item, index) in radioTwoList"
                  :label="item.value"
                  :key="index"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </span>
          </div>
          <div style="margin-top: 10px; margin-bottom: -10px">
            <el-button plain type="primary" @click="nidingHz"
              >拟定汇总</el-button
            >
            <el-button plain type="primary" @click="okAll">同意</el-button>
            <el-button plain type="primary" @click="backAll">驳回</el-button>
          </div>
        </div>
        <el-table
          ref="table"
          style="width: 100%; margin-top: 20px"
          :data="dataList"
          border
          v-if="rednermsg"
          v-loading="dataListLoading"
          @row-click="unfoldBtn"
        >
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="70"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="contractName"
            header-align="center"
            align="center"
            show-overflow-tooltip
            min-width="200"
            label="合同名称"
          >
            <template slot-scope="scope">
              <span
                @click="checkDetails(scope.row)"
                style="color: #0e258c; cursor: pointer"
                >{{ scope.row.contractName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            v-if="radio == 2"
            prop="jigouName"
            header-align="center"
            align="center"
            label="机构名称"
          >
          </el-table-column>
          <el-table-column
            v-if="radio == 1"
            prop="shouyueCode"
            header-align="center"
            align="center"
            min-width="150"
            label="受约人编号"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                <span v-for="item in scope.row.shouyueCode.split(',')"
                  >{{ item }}<br
                /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="(item, index) in cutout(scope.row.shouyueCode).slice(
                  0,
                  2
                )"
                :key="index"
              >
                <el-badge
                  :value="cutout(scope.row.shouyueCode).length"
                  :max="9"
                  v-if="cutout(scope.row.shouyueCode).length > 2 && index === 0"
                  class="itembadge"
                >
                  <span>{{ item }}</span>
                </el-badge>
                <span v-else>{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="radio == 1"
            prop="shouyueName"
            header-align="center"
            align="center"
            min-width="120"
            label="受约人姓名"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                <span v-for="item in scope.row.shouyueName.split(',')"
                  >{{ item }}<br
                /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="(item, index) in cutout(scope.row.shouyueName).slice(
                  0,
                  2
                )"
              >
                <el-badge
                  :value="cutout(scope.row.shouyueName).length"
                  :max="9"
                  v-if="cutout(scope.row.shouyueName).length > 2 && index === 0"
                  style="margin-top: 10px; margin-right: 0px"
                >
                  <span>{{ item }}</span>
                </el-badge>
                <span v-else>{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="radio == 1"
            prop="shouyueDeptName"
            header-align="center"
            align="center"
            min-width="150"
            label="受约人单位"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                <span v-for="item in scope.row.shouyueDeptName.split(',')"
                  >{{ item }}<br
                /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="(item, index) in cutout(scope.row.shouyueDeptName).slice(
                  0,
                  2
                )"
                :key="index"
              >
                <el-badge
                  :value="cutout(scope.row.shouyueDeptName).length"
                  :max="9"
                  v-if="
                    cutout(scope.row.shouyueDeptName).length > 2 && index === 0
                  "
                  class="itembadge"
                >
                  <span>{{ item }}</span>
                </el-badge>
                <span v-else>{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="shows == 1"
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人岗位"
          >
            <template slot="header">
              <el-tooltip placement="top" content="点击切换至受约人职级">
                <span
                    ><i
                      @click="switchBtn(2)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >受约人岗位</span
                  >
              </el-tooltip>
            </template>

            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                <span v-for="item in scope.row.shouyueZhiwu.split(',')"
                  >{{ item }}<br
                /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)"
              >
                <el-tooltip
                  class="item"
                  :disabled="
                    item.length < 8 && cutout(scope.row.shouyueZhiwu).length < 3
                  "
                  effect="dark"
                  :content="scope.row.shouyueZhiwu"
                  placement="top-start"
                >
                  <span>{{ validatenull(item) ? "-" : item | ellipsis }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="shows == 2"
            prop="ryZjmc"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职级"
          >
            <template slot="header">
              <el-tooltip placement="top" content="点击切换至受约人岗位">
                <span
                    ><i
                      @click="switchBtn(1)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >受约人职级</span
                  >
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            label="发约人姓名"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                <span v-for="item in scope.row.fayueName.split(',')"
                  >{{ item }}<br
                /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="(item, index) in cutout(scope.row.fayueName).slice(0, 2)"
                :key="index"
              >
                <el-badge
                    :value="cutout(scope.row.fayueName).length"
                    :max="9"
                    v-if="cutout(scope.row.fayueName).length > 2 && index === 0"
                    style="margin-top: 10px; margin-right: 0px"
                  >
                    <span>{{ item }}</span>
                </el-badge>
                <span v-else>{{ item }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="发约人岗位"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                <span v-for="item in scope.row.fayueZhiwu.split(',')"
                  >{{ item }}<br
                /></span>
              </div>
              <div v-if="scope.row.rowshows == true" v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                <span>{{
                    (validatenull(item) ? "-" : item) | ellipsis
                  }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            v-if="this.hetongzhibiaoTable.lastPage == 'tbsh'"
            prop="contFillStatus"
            header-align="center"
            align="center"
            min-width="120"
            label="填报审核状态"
            :formatter="statusFormater"
          >
          </el-table-column>
          <el-table-column
            prop="contractAuditStatus"
            header-align="center"
            align="center"
            width="120"
            label="合同状态"
          >
            <template slot-scope="scope">
              <span v-html="cutout2(scope.row.contractAuditStatus)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <TianBaoTable
      v-if="zhiShow == 3"
      ref="tianbaotable"
      :hetongzhibiaoTable="hetongzhibiaoTable"
      :dataListHT="dataListHT"
      :tianBaoTable="tianBaoTable"
      :ids="ids"
      :ndids="ndids"
      :radio="radio"
      @fnBackOldPage="fnBackOldPage"
    ></TianBaoTable>
  </basic-container>
</template>

<script>
import { delObj, radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import { fetchList } from "@/api/hetongrenwu/hetongtbfq";

import {
  okAllApish,
  backAllApish,
  confirmStatusforzbsh
} from "@/api/hetongrenwu/hetongyeji/hetongnd";
import {
  tbshokAllByContract,
  pageByzbsh,
} from "@/api/hetongrenwu/hetongyeji/hetongzb";
import TianBaoTable from "@/views/hetongrenwu/components/htndhuizong-table.vue";
import { mapGetters } from "vuex";
import { validatenull } from "@/util/validate";
export default {
  props: {
    hetongzhibiaoTable: {},
  },
  components: {
    TianBaoTable,
  },
  name: "hetongcj-table",
  data() {
    return {
      tianBaoTable: {},
      ids: [],
      dataForm: {
        key: "",
      },
      ndids: [],
      dataListHT: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      fullscreenLoading: false,
      radio: "1",
      radioTwo: "-1",
      zhiShow: 1,
      zbvisible: false,
      hetongId: Number,
      zhibiaoForm: {},
      treeOrgData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      confirmTreeData: [
        {
          id: 5,
          label: "二级机构",
        },
      ],
      selectedTreeData: [],
      searchadvanced: true,
      searchheight: "0",
      radioTwoList: radioTwoList,
      status: "",
      shows: 1,
      rednermsg: true,
    };
  },
  watch: {
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
    radioTwo(value) {
      if (value) {
        this.getDataList();
      }
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo = params.radioTwo;
    }
    this.getDataList();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    unfoldBtn(row) {
      row.rowshows = !row.rowshows;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
    checkDetails(row) {
      this.$emit("hetongcjC", row);
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "50";
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      if (this.hetongzhibiaoTable.lastPage == "tbsh") {
        ////console.log("tbsh==="+JSON.stringify(this.hetongzhibiaoTable.lastPage))
        fetchList(
          Object.assign({
            fayueName: this.dataForm.fayueName,
            fayueZhiwu: this.dataForm.fayueZhiwu,
            shouyueZhiwu: this.dataForm.shouyueZhiwu,
            shouyueName: this.dataForm.shouyueName,
            current: this.pageIndex,
            size: this.pageSize,
            contractAuditStatus: 7,
            pageType: "httbsh",
            // contractName:this.dataForm.contractName
          })
        ).then((response) => {
          
          this.dataList = response.data.data.records.map(item=>{
            item.rowshows=true;
            return item;
          });
          this.totalPage = response.data.data.total;
          // this.dataList.forEach((ele) => {
          //   ele.rowshows = true;
          // });
        });
        this.dataListLoading = false;
      } else {
        pageByzbsh(
          Object.assign({
            type: this.radio,
            isbenbu: this.radioTwo,
            status: 1,
            fayueName: this.dataForm.fayueName,
            fayueZhiwu: this.dataForm.fayueZhiwu,
            shouyueZhiwu: this.dataForm.shouyueZhiwu,
            quotaauditStatus: this.dataForm.quotaauditStatus,
            contractAuditStatus: this.dataForm.contractAuditStatus,
            shouyueName: this.dataForm.shouyueName,
            current: this.pageIndex,
            size: this.pageSize,
            contractName: this.dataForm.contractName,
            ryZjmc: this.dataForm.ryZjmc,
          })
        ).then((response) => {
          if(response.data.data.records){
            this.dataList = response.data.data.records.map(item=>{
            item.rowshows=true;
            return item;
          });
          }
          
          this.totalPage = response.data.data.total;
          this.$nextTick(function () {
            this.dataListLoading = false;
          });
        });
      }
    },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if (c.size < 1) {
          c.push("-");
          c.push("-");
        } else if (c.size < 2) {
          c.push("-");
        }
        return c;
      }
    },
    cutout2(cellValue) {
      if (cellValue == 0) {
        return "创建中";
      }
      if (cellValue == 1) {
        return "指标填报中";
      }
      if (cellValue == 2) {
        return "汇总中";
      }
      if (cellValue == 3) {
        return "汇总完成";
      }
      if (cellValue == 4) {
        return "文本审核中";
      }
      if (cellValue == 5) {
        return "文本审核退回";
      }
      if (cellValue == 6) {
        return "文本审核通过";
      }
      if (cellValue == 7) {
        return "受约人审核中";
      }
      if (cellValue == 8) {
        return "发约人审核中";
      }
      if (cellValue == 9) {
        return "签订完成";
      }
      if (cellValue == 10) {
        return "已归档";
      }
      if (cellValue == 11) {
        return "填报中";
      }
      if (cellValue == 12) {
        return "填报审核中";
      }
      if (cellValue == 13) {
        return "汇总完成";
      }
      if (cellValue == 14) {
        return "领导审核中";
      }
      if (cellValue == 15) {
        return "领导审核完成";
      }
      if (cellValue == 16) {
        return "已结束";
      }
    },
    //判空
    validatenull(val) {
      return validatenull(val);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //批量驳回
    backAll(obj) {
      var data = this.$refs.table.selection;
      var _this = this;
      var ids = [];
      if (obj == 1) {
        for (var i = 0; i < this.dataList.length; i++) {
          ids.push(this.dataList[i].id);
        }
        data = this.dataList;
      } else {
        if (data.length == 0) {
          this.$message.closeAll();
          this.$message.error("请至少选择一个合同！");
          return;
        }
        var ids = [];
        for (var i = 0; i < data.length; i++) {
          ids.push(data[i].id);
        }
      }
      confirmStatusforzbsh(ids).then((response) => {
        if (response.data.data) {
          this.$confirm("确定要批量驳回吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(function () {
              _this.fullscreenLoading = true;
              return backAllApish({ rows: data, formName: "zbsh" }).then(
                (data) => {
                  _this.$message.closeAll();
                  _this.$message.success("选中合同已批量驳回！");
                  _this.fullscreenLoading = false;
                  _this.getDataList();
                }
              );
            })
            .catch(() => {
              this.$message.closeAll();
              this.$message({
                type: "info",
                message: "已取消驳回!",
              });
            });
        } else {
          this.$message.closeAll();
          this.$message.success("选中合同存在已同意的指标，无法批量驳回！");
        }
      });
    },
    //批量同意
    okAll(obj) {
      var _this = this;
      var data = this.$refs.table.selection;
      //console.log("this.hetongzhibiaoTable.lastPage:"+this.hetongzhibiaoTable.lastPage)
      if (this.hetongzhibiaoTable.lastPage == "tbsh") {
        if (data.length == 0) {
          this.$message.closeAll();
          this.$message.error("请至少选择一个合同！");
          return;
        }
        this.$confirm("确定要批量同意吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            _this.fullscreenLoading = true;
            return tbshokAllByContract({ rows: data });
          })
          .then((data) => {
            _this.$message.closeAll();
            _this.$message.success("选中合同已批量同意！");
            _this.fullscreenLoading = false;
            _this.getDataList();
          });
      } else {
        var ids = [];
        if (obj == 1) {
          for (var i = 0; i < this.dataList.length; i++) {
            ids.push(this.dataList[i].id);
          }
          data = this.dataList;
        } else {
          if (data.length == 0) {
            this.$message.closeAll();
            this.$message.error("请至少选择一个合同！");
            return;
          }
          var ids = [];
          for (var i = 0; i < data.length; i++) {
            ids.push(data[i].id);
          }
          // var idsStr=ids.join(',')
        }
        confirmStatusforzbsh(ids).then((response) => {
          if (response.data.data) {
            this.$confirm("确定要批量同意吗？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(function () {
                _this.fullscreenLoading = true;
                return okAllApish({ rows: data });
              })
              .then((data) => {
                _this.$message.closeAll();
                _this.$message.success("选中合同已批量同意！");
                _this.fullscreenLoading = false;
                _this.getDataList();
              });
          } else {
            _this.$message.closeAll();
            _this.$message.success("选中合同存在已驳回的指标，无法批量同意！");
          }
        });
      }
    },

    statusFormater(row, column) {
      const status = row.contFillStatus;
      if (status == 0) {
        return "未填报";
      } else if (status == 1) {
        return "待预填报";
      } else if (status == 2) {
        return "已预填报";
      } else if (status == 3) {
        return "待填报";
      } else if (status == 4) {
        return "已填报";
      } else if (status == 5) {
        return "预填报审核中";
      } else if (status == 6) {
        return "填报审核中";
      } else if (status == 7) {
        return "预填报已退回";
      } else if (status == 8) {
        return "填报已退回";
      }
    },
    checkboxSelect(row, rowIndex) {
      if (this.hetongzhibiaoTable.lastPage == "tbsh") {
        if (row.contFillStatus == 5 || row.contFillStatus == 6) {
          return true;
        } else {
          return false;
        }
      } else {
        if (row.quotaauditStatus != 2) {
          return true;
        } else {
          return false;
        }
      }
    },
    nidingHz() {
      if (this.$refs.table.selection.length < 1) {
        this.$message.closeAll();
        this.$message.error("请至少选中一条合同");
        return;
      }
      if (this.multipleSelection != undefined) {
        var ids = this.multipleSelection.map((item) => {
          return item.htId;
        });
        this.ids = ids;
      } else {
        var ids = this.$refs.table.selection.map((item) => {
          return item.htId;
        });
        this.ids = ids;
      }
      this.zhiShow = 3;
      var taskIds = "";
      var isids = "";
      this.$refs.table.selection.forEach((item) => {
        taskIds = taskIds + item.taskId + ",";
      });
      this.$refs.table.selection.forEach((item) => {
        isids = isids + item.id + ",";
      });
      var ndids = this.$refs.table.selection.map((item) => {
        return item.id;
      });
      this.ndids = ndids;
      //console.log("this.ndids",this.ndids)
      this.tianBaoTable = {
        lastPage: "zbsh",
        taskIds: taskIds,
        ndIds: isids,
      };
      this.dataListHT = this.$refs.table.selection;
      this.$nextTick(() => {
        this.$refs.tianbaotable.editLock();
      });
    },
    fnBackOldPage(data) {
      this.zhiShow = 1;
      this.ids = [];
      this.multipleSelection = undefined;
      this.getDataList();
    },
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
    },
    //切换显示受约人职务和受约人职级
    switchBtn(e) {
      this.shows = e;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
  },
};
</script>

<style>
</style>
